<template>
  <div>
    <div class="app-panel-title">
      <h5>
        <span>{{template.title}}</span>
        <span style="margin-left:10px">
          <el-button type="text" style="padding:0">
            <font-awesome-icon icon="edit" @click="changeEditStatus"></font-awesome-icon>
          </el-button>
        </span>
      </h5>
    </div>
    <div class="app-panel-content">
      <slot>
        
      </slot>
    </div>
    <div class="app-panel-foot">
      <slot name="foot">

      </slot>
    </div>
</template>
<script>
export default {
  components: {
    // subContent01
  },
  props: {
    template: {
      type: Object,
      default: function() {
        return {
          title: "title"
        };
      }
    },
    data: {
      type: Object,
      default: function() {
        return {
          title: "title"
        };
      }
    },
    defaultEditStatus: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      dataTemp: {},
      editStatus: false
    };
  },
  created() {
    console.debug("panel");
    this.editStatus = this.defaultEditStatus;
    this.redata();
  },
  methods: {
    changeEditStatus() {
      if (this.editStatus) {
        this.redata();
      }
      this.editStatus = !this.editStatus;
    },
    redata() {
      this.dataTemp = JSON.parse(JSON.stringify(this.data));
    }
  }
};
</script>
